<template>
  <div class="settting-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar class="top-nav-bar" @click-left="$router.back()">
      <template #left>
        <van-icon name="arrow-left" color="#000" class="icon"/>
        <span>设置</span>
      </template>
    </van-nav-bar>
    <!-- 设置界面功能列表 -->
    <div class="box">
      <div @click="$router.push({name: 'changepassword'})">
        <span><van-icon name="replay icon"/>修改密码</span>
        <span><van-icon name="arrow"/></span>
      </div>
    </div>
    <!-- 切换账号按钮 -->
    <div class="change-user-btn-box btn-box" @click="$router.push({name: 'login'})">
      <van-button color="linear-gradient(to right, #ff34ae, #ee0a24)" class="btn">
        切换账号
      </van-button>
    </div>
    <!-- 退出登录按钮 -->
    <div class="login-out-btn-box btn-box" @click="loginOut">
      <van-button color="linear-gradient(to right, #ff34ae, #ee0a24)" class="btn">
        退出登录
      </van-button>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';

export default {
  name: 'Setting',
  methods: {
    // 退出登录
    loginOut() {
      Dialog.confirm({
        message: '是否确认退出<br>当前账号',
      })
        .then(() => {
          // on confirm
          // 清除登录令牌退出登录
          localStorage.removeItem('token')
          this.$router.push({name: 'home'})
        })
        .catch(() => {
          // on cancel
        });
    },
  }
}
</script>

<style lang="less" scoped>
// 本组件容器样式
.settting-container {
  height: 100vh;
  background-color: #eee;
}
// 导航栏样式
.top-nav-bar {
  .icon {
    margin-right: 0.5rem;
    font-size: 1.5rem;
  }
  span {
    font-size: 1.25rem;
  }
}
// 列表样式
.box {
  margin: 0.5rem 0.5rem 0;
  padding: 0.5rem 0.5rem;
  border-radius: 1rem;
  background-color: #fff;
  div {
    height: 3rem;
    line-height: 3rem;
    span:nth-child(1) {
      float: left;
      .icon {
        margin: 0 1rem 0 0.5rem;
        vertical-align: middle;
        font-size: 1.8rem;
      }
    }
    span:nth-child(2) {
      float: right;
    }
  }
  // 清除浮动
  div::after {
    /* after 伪元素必须有content属性 */ 
    content: ""; 
    /* 默认是行内元素，需要转化为块元素 */ 
    display: block; 
    height: 0; 
    /* 清除左右浮动的影响 */ 
    clear: both; 
    visibility: hidden;
  }
}
// 按钮样式
.btn-box {
  overflow: hidden;
  width: 96%;
  margin: 1rem auto 0;
  border-radius: 1rem;
  .btn {
    width: 100%;
    height: 3.5rem;
    color: #ff34ae;
  }
}
</style>